<template>
	<view class="content">
		<view class="navs">
			<view class="nav" v-for="(nav,index) in navs" :class="{selected:current===index}" :key="index"
				@click="selectNav(index)">{{nav}}</view>
		</view>
		<view class="items">
			<view class="item" v-for="g in list" :key="g.id">
				<view class="item-top">
					<image :src="g.img" class="img" mode="aspectFill"></image>
					<view class="detail">
						<view class="name">{{g.productName}}</view>
						<view class="number">
							<view>销量：{{g.salesVolume}}</view>
							<view>库存：{{g.inventory}}</view>
						</view>
						<view style="color:gray;"><span style="color: #e1e100;margin-right: 6rpx;">¥</span>{{g.price}}/件</view>
					</view>
				</view>
				<view class="item-bottom">
					<view class="edit" @click="edit(g.productId)">编辑</view>
					<view class="delete" @click="deletefct(g.productId)">删除</view>
					<view class="xiajia" v-if="current===0" @click="xj(g.productId)">下架</view>
					<view class="xiajia" v-if="current===1" @click="sj(g.productId)">上架</view>
					<view class="xiugai"  @click="edit(g.productId)">快速修改</view>
				</view>
			</view>
		</view>
		<view class="add" @click="toAdd">新建商品</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {onShow} from '@dcloudio/uni-app'
	import { goods,fetchProductList,deleteProduct,shangJia,xiaJIa} from '../../api/goods'
	const toAdd = () => {
		uni.navigateTo({
			url: '/pages/goodsManage/add/add'
		})
	}
	const current = ref(0)
	/* 出售中 & 待上架 两组列表 */
	const onSaleList = computed(() => good.value.filter(g => g.status === "出售中"))
	const offSaleList = computed(() => good.value.filter(g => g.status === "待上架"))
	
	/* 当前 tab 对应列表 */
	const list = computed(() => (current.value === 0 ? onSaleList.value : offSaleList.value))
	
	/* 导航文字 + 数量 */
	const navs = computed(() => [
	  `出售中（${onSaleList.value.length}）`,
	  `待上架（${offSaleList.value.length}）`
	])
	// 商品列表
	const good = ref([])

	const edit = (id) => {
		console.log(7788,id)
		uni.navigateTo({
			url:`/pages/goodsManage/add/add?id=${id}`
		})
		
	}
	const sj = async(id)=>{
		await shangJia({
			productId:id
		})
		fetchPL();
		
	}
	// 下架商品
	const xj = async(id)=>{
		await xiaJIa({
			productId:id
		})
		fetchPL();
		
	}
	const selectNav = (index) => {
			current.value = index
		}
	const fetchPL = async()=>{
		const res = await fetchProductList({})
		good.value = res.data.records
		console.log('商品列表接口返回的数据：',res)
	}
	const deletefct = async(id)=>{
		const res = await deleteProduct(
			[id]
		)
		fetchPL();
	}
	
	onShow(async() => {
		await fetchPL();
		
	})
	
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		width: 100%;
		padding-top: 20rpx;
		background: linear-gradient(to bottom,
				#f3eff2 0%,
				#f6f7f9 30%,
				/* 渐变结束点 */
				#f6f7f9 100%
				/* 后半段保持同色 */
			);
	}

	.navs {
		height: 100rpx;
		width: 93%;
		display: flex;
		border-bottom: 0.5rpx solid #eaebec;
		margin-bottom: 20rpx;
	}

	.nav {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 300;
	}

	.nav.selected {
		font-weight: 800;
		border-bottom: 0.5rpx solid #aa0000;
		color: #aa0000;
	}

	.items {
		flex: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		align-items: center;

	}

	.item {
		width: 93%;
		height: auto;
		display: flex;
		flex-direction: column;
		border-bottom: solid #e0e0e1 1rpx;
		padding: 20rpx;
	}

	.item-top {
		width: 100%;
		display: flex;
		height: auto;
	}

	.item-bottom {
		width: 100%;
		display: flex;
		/* justify-content: space-evenly; */
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.number {
		display: flex;

		justify-content: space-between;
		color:gray;
	}

	.img {
		width: 294rpx;
		height: 150rpx;
		margin-right: 20rpx;

	}

	.detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

	}

	.add {
		position: fixed;
		bottom: 10%;
		left: 38%;
		color: white;
		width: 24%;
		height: 50rpx;
		text-align: center;
		padding-top: 8rpx;
		border-radius: 20rpx;
		background-color: #bd3124;
	}
	.name{
		font-size: 35rpx;
		font-weight: 600;
	}
</style>